<!--100%宽度文字-->
<script setup lang="ts">


// const bg_url_workflows = 'https://oss.gptpro.ink/assets/workflow.png-small'
const {darkTheme} = storeToRefs(useCustomizeThemeStore())

const {appPageContent: content} = storeToRefs(useAppStore())
// content.value.home_baner_background_dark
//首页banner
const home_baner_background=computed(()=>{
  if (darkTheme.value) {
    return `url('${content.value.home_baner_background_dark}'`
  } else {
    // return content.value.home_baner_background_light
    return ''
  }
})
</script>

<template>
  <v-sheet color="transparent">
    <div :class="darkTheme?'image':'no-image'">
      <img class="mx-auto" width="200" :src="content.home_baner_logo" alt=""/>
      <v-card
          color="transparent"
          elevation="0"
          class="mx-auto my-10 py-0"
      >
        <h1
            style="color: #4a4d6d"
            class="text-center font-weight-bold mx-2 text-h3 text-lg-h2 text-xl-h1"
        >
          <span :class="darkTheme?'text-white':'text-grey-darken-1'">{{ content.home_baner_content_1 }}</span>

          <span class="text-primary">{{ content.home_baner_content_2 }}</span>
          <span :class="darkTheme?'text-white':'text-grey-darken-1'">{{ content.home_baner_content_3 }}</span>

          <span class="text-primary">{{ content.home_baner_content_4 }}</span>
        </h1>

      </v-card>
      <h2 class="text-center text-h4 font-weight-bold text-secondary my-2 gradient-text">
        {{ content.home_baner_content_5 }}
      </h2>
      <div class="text-center mb-10">
        <v-btn prepend-icon="mdi-draw-pen"  class="text-white mr-2" :to="content.home_baner_button2_route"
               :style="{ backgroundImage: 'linear-gradient(to right, #17C1E8, #425BD3)' }"
        >免费体验
        </v-btn
        >
        <!--          <v-icon size="small" color="primary">mdi-help</v-icon>-->
        <v-btn v-show="!content.home_baner_button2_hidden" prepend-icon="mdi-web-check"  to="/about/introduction" class="gradient-btn ml-2 my-2">
          0基础免费部署
        </v-btn>
      </div>
    </div>
  </v-sheet>
</template>

<style scoped lang="scss">

.image {
  background-image: v-bind(home_baner_background);
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.no-image {
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #da1b60); /* 定义渐变颜色 */
  -webkit-background-clip: text; /* 使用背景色填充文本 */
  -webkit-text-fill-color: transparent; /* 隐藏文字原有颜色 */
}

.gradient-btn {
  background-image: linear-gradient(to right, #ff8a00, #da1b60); /* 定义渐变颜色 */
}
</style>
